import React,{PureComponent} from 'react'
import {View,Image,StyleSheet,TouchableOpacity,TextInput,Text,Dimensions,Button,Platform} from 'react-native'

import api from '../../api/api'
import method from '../../api/method'
import {fetchPostRequest,fetchGetRequest} from '../../api/NetworkTool'

const {width} = Dimensions.get('window')

type Props = {
    course:Object,
    callback:Function,
}


export default class OrderPayView extends PureComponent<Props>{

    AliPay = async() => {

        this.setState({
            alipy:require('../../../res/img/detail/detail_select.png'),
            wechat:require('../../../res/img/detail/detail_un_select.png')
        })
        this.props.callback('alipay')

    }

    constructor(props){
        super(props);
        this.state = {
            wechat:require('../../../res/img/detail/detail_select.png'),
            alipy:require('../../../res/img/detail/detail_un_select.png')
        }
    }
    wechat = async() =>{
        this.props.callback('wxpay')
        this.setState({
            wechat:require('../../../res/img/detail/detail_select.png'),
            alipy:require('../../../res/img/detail/detail_un_select.png')
        })
    }

    render(){
        return (
            <View style={{backgroundColor:'white',flex:1}}>
               <Text style={styles.big_title}>支付方式</Text>
               <TouchableOpacity style={styles.pay_view} onPress={this.AliPay}>
                    <Image source={require('../../../res/img/detail/alipay.png')}/>
                   <View style={{marginLeft:27,flexDirection:'column'}}>
                    <Text style={styles.pay_title}>支付宝支付</Text>
                    <Text style={styles.pay_small_title}>Alipay to pay</Text>
                   </View>
                  <View style={{flex:1}}/>
                     <TouchableOpacity style={{width:21,height:21}} onPress={this.AliPay}>
                        <Image source={this.state.alipy}/>
                    </TouchableOpacity>
               </TouchableOpacity>
                <TouchableOpacity style={styles.pay_view} onPress={this.wechat}>
                    <Image source={require('../../../res/img/detail/weichat.png')}/>
                    <View style={{marginLeft:27,flexDirection:'column'}}>
                        <View style={{flexDirection:'row'}}>
                            <Text style={styles.pay_title}>微信支付</Text>
                            <View style={{backgroundColor:'#835110',borderRadius:3,marginLeft:6,paddingLeft:5,paddingRight:5,paddingTop:1,paddingBottom:1,alignItems:'center',justifyContent:'center'}}>
                                <Text style={{color:'white',fontSize:10,fontWeight:'200'}}>推荐</Text>
                            </View>
                        </View>
                        <Text style={styles.pay_small_title}>WeChat payment</Text>
                    </View>
                    <View style={{flex:1}}/>
                    <TouchableOpacity style={{width:21,height:21}} onPress={this.wechat}>
                        <Image source={this.state.wechat}/>
                    </TouchableOpacity>
                </TouchableOpacity>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    big_title : {
      fontWeight:'bold',
      fontSize:16,
      color:'black',
        marginTop:15,
        marginBottom:10,
        marginLeft:12,
    },
    pay_view:{
      paddingLeft:20,
      paddingRight:20,
        marginBottom:10,
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
    },

    pay_title:{
       color:'rgba(0,0,0,0.7)',
        fontSize:13,
        fontWeight:'bold',
    },
    pay_small_title:{
        marginTop:3,
        color:'rgba(0,0,0,0.3)',
        fontSize:10,
        fontWeight:'bold',
    },

})